<template>
  <view class="con">
    <view class="top flex">
      <image class="topz" mode="widthFix" src="/static/index/img38.png"></image>
      <view class="topy">教程为团队实操拆解，禁止搬运，违者依法追究</view>
    </view>
    <view class="man">
      <view class="man_t">简述</view>
      <view class="man_c1">
        <view class="man_c1_1">
          <mp-html :content="courseInfo.infos" />
        </view>

      </view>
      <!-- banner -->
      <view class="xin_bane">
        <image class="xin_bane_img" mode="widthFix" @click="goGonggao(courseInfo.gonggao_id)" v-if="courseInfo.gonggao_pic" :src="courseInfo.gonggao_pic"></image>
      </view>

      <view class="man_t">收益</view>
      <scroll-view class="man_c2 flex" scroll-x="true">
        <image class="man_c2_img" v-for="(item,index) in courseInfo.piclist" mode="aspectFill" :src="item.pic" @click="previewImage(courseInfo.piclist,index)"></image>
      </scroll-view>
      <!-- 切换（图文和视频切换） -->
      <view class="qihua flex">
        <view class="qihuali" :class="tabIndex===1?'active':''" @click="tabIndex=1">
          <view class="qihuali_1">图文</view>
          <view class="qihuali_2"></view>
        </view>
        <view class="qihuali" :class="tabIndex===2?'active':''" @click="tabShiPHandle">
          <view class="qihuali_1">视频</view>
          <view class="qihuali_2"></view>
        </view>
      </view>
      <view class="qihuaM">
        <view class="qihuaMc" v-if="tabIndex===1">

          <view class="man_c1">
            <view class="adhh flex" @click="tanJiaoliu">
              <image class="adhh_img" mode="widthFix" src="/static/mine/img04.png"></image>
              <view class="adhh_c">交流群<text>(解锁教程可进入)</text></view>
            </view>
            <!-- 如果解锁就显示全部高度，反之显示一部分 -->
            <view class="man_c1_1" :class="(courseInfo.buyed_order_id==='0'||courseInfo.buyed_order_id===0)?'part':''">
              <mp-html :content="courseInfo.infos2" />
            </view>
          </view>
        </view>
        <view class="qihuaMc" v-if="tabIndex===2">
          <view class="man_c1">
            <scroll-view class="man_c2 man_c3 flex" scroll-x="true">
              <view style="display: inline-block;" v-for="(items,indexs) in courseInfo.videos" :key="indexs">
                <!-- <image class="man_c2_img" src="/static/index/img41.png"></image> -->
                <video class="man_c2_img" :src="items"></video>
                <!-- <view class="znemjia">怎么剪辑</view> -->
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
     <!-- v-if="courseInfo.buyed_order_id==='0'||courseInfo.buyed_order_id===0" -->
    <view class="dibude flex flex_between" v-if="courseInfo.buyed_order_id==='0'||courseInfo.buyed_order_id===0">
      <view class="dibudez flex" @click="partCouse">
        <view class="dibudez1">￥<text class="dibudez1_t">{{courseInfo.price}}</text></view>
        <view class="dibudez2">
          <view class="dibudez2_1">{{courseInfo.priceno}}</view>
          <view class="dibudez2_2">解锁教程</view>
        </view>
      </view>
      <navigator url="/packageA/mine/equity" class="dibudey">解锁全部教程？</navigator>
    </view>
    <!-- 交流群 -->
    <view class="zhezhao" v-if="isShow_jiaoliu || isShow" @click="hideTan"></view>
    <view class="tan tan_video" v-if="isShow_jiaoliu">
      <image mode="widthFix" :src="courseInfo.picq"></image>
      <view class="jiaoluc">交流群</view>
    </view>
    <!-- 点击购买弹出 -->
    <view class="tan" v-if="isShow">
      <view class="tan_title">解锁教程</view>
      <view class="tan_t flex">
        <view class="tan_t2">亲，支付完毕后刷新本页面，即可解锁本教程</view>
      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d1" @click="hideTan">取消</view>
        <view class="tan_b_d2" @click="goPay">去支付</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getCourseInfo, //获取课程详细
    courseInfoAddorders //课程购买
  } from '@/request/api.js'
  import uParse from '@/components/u-parse/u-parse.vue'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        id: '', //课程id
        title: '', //课程title
        courseInfo: {}, //课程信息
        isShow: false,
        tabIndex: 1, //切换图文视频
        isShow_jiaoliu: false, //交流弹窗
        isJieSuo: false
      }
    },
    onLoad(options) {
      console.log('进入详情页面')
      console.log(options)
      this.id = options.id
      if (options.title) {
        // uni.setNavigationBarTitle({
        //   title: options.title
        // }); //设置标题
        this.title = options.title
      }

      this.getCourseInfoFun() //获取课程详细
      console.log('进入课程详细--获取options')
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      console.log(options)
      console.log(options.pid)
      console.log(q)
      if (options.pid) {
        // 通过分享页面进的
        console.log('通过分享页面进的')
        uni.setStorageSync('pid', options.pid)

      } else if (q) {
        // 通过扫描二维码进的
        console.log('通过扫描二维码进的')
        var match = q.match(/\?(.+)/);
        if (match && match.length > 1) {
          var queryString = match[1].split("=")[1]; // 获取到的查询字符串
          console.log('pid是多少'); // 输出: data=12345
          console.log(queryString); // 输出: data=12345
          uni.setStorageSync('pid', queryString)
        } else {
          console.log('No query string found.');
        }
      }

    },
    onShow() {

    },
    onReachBottom() {

    },
    methods: {
      previewImage(pics,index) {
        console.log('收益--预览图片')
        console.log(pics)
        let imgList = []
        for(var i=0;i<pics.length;i++){
          imgList.push(pics[i].pic)
        }
        uni.previewImage({
          current: index, // 当前显示图片索引
          urls: imgList,// 需要预览的图片http链接列表
          showmenu: false,
        });
      },
      getCourseInfoFun() {
        getCourseInfo(this.openid, this.id).then(res => {
          console.log('获取课程详细')
          console.log(res)
          if (res.error_code === 0) {
            this.courseInfo = res.data
            this.title = res.data.title
            uni.setNavigationBarTitle({
              title: res.data.title
            }); //设置标题
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }

        })
      },
      // 点击视频
      // 1.如果没有视频,直接不显示"视频"切换入口
      // 2.如果没有解锁,点击视频提示:解锁教程后可查看
      tabShiPHandle() {
        if (this.courseInfo.buyed_order_id != '0') {
          this.tabIndex = 2
        } else {
          uni.showToast({
            icon: 'none',
            title: '解锁教程后可查看'
          })
        }
      },
      hideTan() {
        this.isShow_jiaoliu = this.isShow = false
      },
      // 购买课程
      // 参与课程--需要先登录才能购买
      partCouse() {
        if (this.isLogin === 1) {
          console.log('未授权登录')
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
          setTimeout(function(){
            uni.switchTab({
              url:'/pages/mine/index'
            })
          },500)
          
        } else {
          this.isShow = true
        }
      },
      // 去支付
      goPay() {
        console.log('点击去支付')
        let param = {
          openid: this.openid,
          id: this.id
        }
        let that= this
        courseInfoAddorders(param).then(res => {
          console.log(res)
          if (res.error_code === 0) {
            uni.requestPayment({
              provider: "wxpay",
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              timeStamp: res.data.timeStamp,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success(res) {
                console.log('调起支付')
                console.log(res)
                if (res.errMsg === 'requestPayment:ok') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付成功'
                  })
                  that.getCourseInfoFun() //获取课程详细
                  that.isShow = false
                }
              },
              fail(err) {
                console.log('支付失败', err)
                if (err.errMsg === 'requestPayment:fail cancel') {
                  uni.showToast({
                    icon: 'none',
                    title: '支付失败'
                  })
                }
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 点击跳转公告详情
      goGonggao(id){
        uni.navigateTo({
          url:"/packageA/index/detail2?id="+id
        })
      },
      
      // 点击"交流"
      tanJiaoliu(){
        if (this.courseInfo.buyed_order_id != '0') {
          this.isShow_jiaoliu = true
        } else {
          uni.showToast({
            icon: 'none',
            title: '解锁教程后可查看'
          })
        }
      }
    },
    // 分享微信好友
    onShareAppMessage(event) {
      console.log(event);
      return {
        title: this.title,
        path: '/pages/shiZhanDe/index?pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' + this.title
        // imageUrl: imageUrl
      }
    },
    //分享到朋友圈
    onShareTimeline(event) {
      console.log(event);
      return {
        title: this.title,
        path: '/pages/shiZhanDe/index?pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' + this.title,
        query: 'pid=' + uni.getStorageSync('userInfo').id + '&id=' + this.id + '&title=' + this.title
        // imageUrl: imageUrl
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    background-color: rgba(238, 238, 238, 1);
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .top {
    background-color: rgba(249, 191, 65, 1);
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 60rpx;

    .topz {
      width: 32rpx;
      height: auto;
      margin-right: 20rpx;
    }

    .topy {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
    }
  }

  .man {
    width: 100%;
    height: auto;

    .man_t {
      color: rgba(16, 16, 16, 1);
      font-size: 36rpx;
      margin-bottom: 34rpx;
      margin-left: 30rpx;
    }

    .man_c1 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 30rpx;
      box-sizing: border-box;
      margin-bottom: 30rpx;

      .man_c1_1 {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        // margin-bottom: 30rpx;
        /deep/ .p{
          margin-bottom:4px;
          line-height:18px
        }
        /deep/ .strong{
          font-weight: bold;
        }
        /deep/ .inline{
          display: inline-block;
        }
        /deep/ image{
          display: block !important;
           width: 100% !important;
        }
      }
      .man_c1_1.part{
        min-height: 71rpx;
        height: auto;
        overflow: hidden;
      }

      .man_c1_1 p {
        margin-bottom: 20rpx;
      }
    }

    .man_c2 {
      width: 100%;
      display: flex;
      height: 356rpx;
      white-space: nowrap;

      .man_c2_img {
        width: 200rpx;
        height: 356rpx;
        margin-right: 20rpx;
        border-radius: 20rpx;
      }
    }
  }

  .man_c1_2 {
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .man_c1_3 {
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }

  .znemjia {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    width: 196rpx;
    text-align: center;
    overflow: hidden;
  }

  .man_c2.man_c3 {
    height: 365rpx;
  }

  .dibude {
    width: 100%;
    height: auto;
    margin-bottom: 30rpx;
    align-items: flex-end;

    .dibudez {
      width: 320rpx;
      height: 80rpx;
      border-radius: 60rpx;
      background-color: rgba(16, 16, 16, 1);

      .dibudez1 {
        width: 220rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        background-color: rgba(249, 191, 65, 1);
        border-radius: 60rpx;

        text {
          font-size: 40rpx;
        }
      }

      .dibudez2 {
        width: 140rpx;
        text-align: center;
        height: 80rpx;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
            margin-left: -13rpx;
        .dibudez2_1 {
          color: rgba(249, 191, 65, 1);
          font-size: 12px;
          text-decoration: line-through;
        }

        .dibudez2_2 {
          color: rgba(249, 191, 65, 1);
          font-size: 12px;
        }
      }
    }
  }

  .dibudey {
    color: rgba(16, 16, 16, 1);
    font-size: 24rpx;
    font-weight: bold;
    text-decoration: underline;
  }

  .xin_bane {
    width: 100%;
    height: auto;
    border-radius: 20rpx;
    margin-bottom: 60rpx;

    .xin_bane_img {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
    }
  }

  .qihua {
    width: 100%;
    height: auto;
    margin-bottom: 18rpx;
    margin-top: 60rpx;

    .qihuali {
      color: rgba(155, 155, 155, 1);
      font-size: 36rpx;
      // margin-right:48rpx;
      text-align: center;
      line-height: 64rpx;
      margin-left: 30rpx;
    }

    .qihuali.active {
      color: rgba(16, 16, 16, 1);
    }

    .qihuali_2 {
      width: 60rpx;
      height: 4rpx;
      background-color: rgba(238, 238, 238, 1);
      margin: 0 auto;
    }

    .qihuali.active .qihuali_2 {
      background-color: rgba(249, 191, 65, 1);
    }
  }

  .adhh {
    width: 630rpx;
    height: 80rpx;
    border-radius: 100rpx;
    background-color: rgba(255, 246, 228, 1);
    justify-content: center;
    margin-bottom: 60rpx;

    .adhh_img {
      width: 28rpx;
      height: auto;
      margin-right: 14rpx;
    }

    .adhh_c {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      font-weight: bold;

      text {
        font-weight: normal;
      }
    }
  }

  .tan_video {
    width: 500rpx;
    height: auto;
    padding: 0 0;
    margin-left: -250rpx;
    background: #fff;
    margin-top: -350rpx;

    image {
      width: 90%;
      height: auto;
      display: block;
      margin: 20rpx auto;
      margin-bottom: 0;
    }

    .jiaoluc {
      color: rgba(16, 16, 16, 1);
      font-size: 36rpx;
      width: 100%;
      text-align: center;
      padding: 30rpx 0;
      padding-bottom: 40rpx;
    }
  }
</style>